<template>
    <div class="StudentHeader">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            active-text-color="#ffd04b" text-color="#1a1d27">
            <el-menu-item :index="item.name" v-for="item in menuData" :key="item.name" @click="clickMenu(item)">
                {{ item.label }}
            </el-menu-item>
            <el-menu-item>
                <span class="logout" @click="Logout">退出登录</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: "StudentHeader",
    data() {
        return {
            activeIndex: '1',
            // 菜单数据
            menuData: [
                {
                    path: "/StuIndex",
                    name: "main",
                    label: "首页",
                    url: "student/Index",
                },

                {
                    path: "/StuCourseInfo",
                    name: "stuCourseInfo",
                    label: "课程信息",
                    url: "student/CourseInfo",
                },

                {
                    path: "/StuTestList",
                    name: "stuTestList",
                    label: "试卷列表",
                    url: "student/StuTestList",
                },

                {
                    path: "/Discuss",
                    name: "discuss",
                    label: "学习交流",
                    url: "student/Discuss",
                },

                {
                    path: "/StuStudyCourse",
                    name: "stuStudyCourse",
                    label: "学习课程",
                    url: "student/StudyCourse",
                },

                {
                    path: "/StuOrderCourse",
                    name: "stuOrderCourse",
                    label: "购买记录",
                    url: "student/OrderCourse",
                },

                {
                    path: "/StuPersonalCenter",
                    name: "stuPersonalCenter",
                    label: "个人中心",
                    url: "student/PersonalCenter",
                },
            ]
        }

    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        clickMenu(item) {
            // 如果更新的路由和当前路由不一致就更新路由
            if (this.$route.path != item.path && !(this.$route.path === "/StudentHome" && item.path === "/")) {
                this.$router.push(item.path)
            }
        },
        //退出登录
        Logout() {
            this.axios.post("/student/logout")
                .then(res => {
                    if (res.data == "success") {
                        this.$router.push("/Login");
                    }
                })
        }
    },
};
</script>


<style scoped>
.logout:hover {
    color: red;
    cursor: pointer
}
</style>